<template>
  <div class="form-box">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="115px"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input
          clearable
          placeholder="请输入活动名称"
          maxlength="20"
          show-word-limit
          style="width:35%"
          v-model="ruleForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动档案" prop="activityArchives">
        <el-input
          clearable
          placeholder="请输入活动的目的和活动背景"
          maxlength="1000"
          type="textarea"
          :autosize="{ minRows: 4 }"
          show-word-limit
          style="width:35%"
          v-model.trim="ruleForm.activityArchives"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动规则" prop="activityRules">
        <tinyMceEditor
          ref="tinymce"
          :editorContent="ruleForm.activityRules"
          :textMax="1000"
        ></tinyMceEditor>
      </el-form-item>
      <el-form-item
        label="活动起止时间"
        prop="activityTimeData.activityTimeType"
      >
        <el-radio-group
          v-model="ruleForm.activityTimeData.activityTimeType"
          size="small"
        >
          <el-radio
            v-for="item in activityTimeTypeList"
            :key="item.dictValue"
            :label="item.dictValue"
            >{{ item.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 短期 -->
      <el-form-item
        v-if="ruleForm.activityTimeData.activityTimeType === 'SPECIFIED_TIME'"
        prop="startEndTime"
      >
        <el-date-picker
          size="small"
          v-model="ruleForm.startEndTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 长期 -->
      <el-form-item
        v-if="ruleForm.activityTimeData.activityTimeType === 'LONG_TERM'"
        prop="activityTimeData.configTime.activityStartTime"
      >
        <el-select
          v-model="ruleForm.activityTimeData.activityStartTimeType"
          style="width:25%"
          clearable
        >
          <el-option
            v-for="item in activityStartStatusList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-if="
            ruleForm.activityTimeData.activityStartTimeType === 'TIMED_START'
          "
          v-model="ruleForm.activityTimeData.configTime.activityStartTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="handlerButton">
      <el-button type="info" @click="cancel">取 消</el-button>
      <el-button type="success" @click="handelTab('customConfig')">
        下一步
      </el-button>
    </div>
  </div>
</template>

<script>
import tinyMceEditor from '@common/tinyMceEditor'
// import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  props: ['activityInfo'],
  components: { tinyMceEditor },
  data() {
    /* 活动规则校验 */
    var validateContent = (rule, value, callback) => {
      if (this.ruleForm.activityRules && !this.flag) {
        callback(new Error('超过最大字数限制,最大字数为1000'))
      } else callback()
    }
    /* 起始时间校验 */
    var validateStartEndTime = (rule, value, callback) => {
      const {
        activityStartTimeType,
        configTime
      } = this.ruleForm.activityTimeData
      if (
        activityStartTimeType === 'TIMING_START' &&
        !configTime.activityStartTime
      ) {
        callback(new Error('请选择开始时间'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: '', //活动名称
        activityArchives: '', //活动档案
        activityRules: '', //活动规则
        activityType: 'PRESENTING_COURSE', //赠课活动
        activityTimeData: {
          activityStartTimeType: 'IMMEDIATE_START', //赠课活动开始时间类型
          activityTimeType: '', //赠课活动时效类型
          configTime: {
            activityEndTime: '', //赠课活动配置结束时间
            activityStartTime: '' //赠课活动配置开始时间
          }
        },
        startEndTime: [] //活动起始时间
      },
      flag: null, //富文本超出字数限制
      activityTimeTypeList: [
        { dictLabel: '长期有效', dictValue: 'LONG_TERM' },
        { dictLabel: '短期有效', dictValue: 'SPECIFIED_TIME' }
      ], //活动时效
      activityStartStatusList: [
        { dictLabel: '立即开始', dictValue: 'IMMEDIATE_START' },
        { dictLabel: '定时开始', dictValue: 'TIMED_START' }
      ], //活动开始状态
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        activityArchives: [
          { required: true, message: '请输入活动档案', trigger: 'blur' }
        ],
        activityRules: [{ validator: validateContent }],
        'activityTimeData.activityTimeType': [
          { required: true, message: '请选择活动时效' }
        ],
        startEndTime: [{ required: true, message: '请选择起始时间' }],
        'activityTimeData.configTime.activityStartTime': [
          { required: true, validator: validateStartEndTime }
        ]
      }
    }
  },
  watch: {
    activityInfo: {
      handler(val) {
        this.ruleForm = this.activityInfo
        const {
          activityStartTime,
          activityEndTime
        } = this.ruleForm.activityTimeData.configTime
        this.ruleForm.startEndTime = [activityStartTime, activityEndTime]
      },
      deep: true
    }
  },
  methods: {
    /* 提交 */
    collectData() {
      const { content, flag } = this.$refs['tinymce'].tinymceEditorContent(
        'other'
      )
      this.flag = flag
      this.ruleForm.activityRules = content
      const {
        activityTimeType,
        activityStartTimeType
      } = this.ruleForm.activityTimeData
      if (activityTimeType === 'SPECIFIED_TIME') {
        this.ruleForm.activityTimeData.configTime.activityStartTime = this.ruleForm.startEndTime[0]
        this.ruleForm.activityTimeData.configTime.activityEndTime = this.ruleForm.startEndTime[1]
      } else if (
        activityTimeType === 'LONG_TERM' &&
        activityStartTimeType === 'TIMED_START'
      ) {
        this.ruleForm.activityTimeData.configTime.activityEndTime = ''
      } else if (
        activityTimeType === 'LONG_TERM' &&
        activityStartTimeType === 'IMMEDIATE_START'
      ) {
        this.ruleForm.activityTimeData.configTime.activityStartTime = ''
        this.ruleForm.activityTimeData.configTime.activityEndTime = ''
      }
      let obj = Object.assign({}, this.ruleForm)
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (activityTimeType === 'SPECIFIED_TIME') {
            obj.activityTimeData.activityStartTimeType = null
          }
          delete obj.startEndTime
        } else {
          obj = { tab: 'generalConfig' }
        }
      })
      return obj
    },
    /* 下一步 */
    handelTab(name) {
      this.$emit('handleClick', { name })
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: 'wh:inviteHaveGift' })
    }
  }
}
</script>

<style lang="less" scoped>
.verify-icon {
  position: absolute;
  top: 5px;
  left: 35%;
  font-size: 30px;
  margin-left: 10px;
}
.handlerButton {
  width: 190px;
  margin: 0 auto;
  .el-button {
    margin-right: 30px;
  }
}
</style>
